<template>
  <div class="login-container">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="80px"
      class="login-form"
    >
      <h2 class="login-title">{{ $t("user.UserManagementSystem") }}</h2>
      <el-divider></el-divider>
      <el-form-item :label="$t('user.Name')" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.Password')" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')"
          >{{ $t("user.Login") }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import Vue from "vue";
// import { getCurrentInstance } from "vue";
// var appContext = null;
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { mapActions, mapMutations } from "vuex";
export default {
  setup() {
    // appContext = getCurrentInstance().appContext;
    // alert(
    //   "0000" + appContext.config.globalProperties.base_url + "/file/fileUpload"
    // );
    // console.log("instance???", proxy.appContext.config.globalProperties);
    return {};
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: this.$t("user.UserNotEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: this.$t("user.Min1max20"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("user.PasswordNotEmpty"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: this.$t("user.Min1max50"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    localStorage.removeItem("token");
  },
  methods: {
    // vuex Action2 辅助函数mapActions 组件内方便调用
    ...mapActions(["setloginuser"]),
    // vuex Action3 辅助函数mapActions 组件内方便调用
    ...mapActions({ setloginuser3: "setloginuser" }),
    // vuex Action4 辅助函数mapMutations 组件内方便调用
    ...mapMutations(
      { setloginuser4: "setloginuser" },
      { setloginuser5: "setloginuser" }
    ),
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        // console.log(valid) 验证通过为true，有一个不通过就是false
        if (valid) {
          // 用户认证
          let url;

          // url = Vue.prototype.base_url + "/uservue/login";
          // url = appContext.config.globalProperties.base_url + "/uservue/login";
          url = that.base_url + "/uservue/login";

          let data = that.$qs.stringify({
            // 使用 sq 插件对 axios 中 json 数据进行转换
            name: that.form.username,
            password: that.form.password,
            email: "",
            phonenumber: "",
            userimg: "",
          });

          that.$axios
            .post(url, data)
            .then((res) => {
              console.log(res.data);
              if (res.data.result == "success") {
                // localStorage.setItem("token", res.headers.token);//存token    ⇒ 转到拦截器 main.js

                // vuex stroe 用户数据保存
                let loginuser = {
                  name: that.form.username,
                  password: that.form.password,
                };
                // // vuex mutations
                // that.$store.commit("setloginuser", loginuser);
                // vuex Action1
                // that.$store.dispatch("setloginuser", loginuser);
                // vuex Action2
                // that.setloginuser(loginuser);
                // vuex Action3
                // that.setloginuser3(loginuser);
                // vuex Action4
                that.setloginuser4(loginuser);
                // 通过的逻辑 路由跳转
                that.$router.push({
                  path: "/mainenu",
                  query: { id: that.form.username },
                });
              } else {
                // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
                that.$message({
                  showClose: true,
                  message: that.$t("user.LoginError"),
                  type: "error",
                });
              }
            })
            // .catch((error) => {
            .catch(() => {
              // localStorage.removeItem("token");//删除token   ⇒ 转到拦截器 main.js
              that.$message({
                showClose: true,
                message: that.$t("user.Error"),
                type: "error",
              });
            });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
</script>

<style acoped>
.login-form {
  width: 400px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ece9e9;
  /* background: url("../../assets/login.png"); */
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
</style>
